
<template>
  <div>
    <div @touchend="handleTouchEnd">
      <x-overlay :show="haveOverlay && isOverShow"
                   v-if="show"
                   ref="overlay"
                   v-bind="overlayCfg"
                   opacity="0.5"
                   @overlayClicking="bodyClicking" ></x-overlay>
    </div>
    <div ref="x-popup"
         v-if="show"
         :height="_height"
         :hack="isNeedShow"
         @click="()=>{}"
         :class="['x-popup', pos]"
         :style="padStyle">
      <slot name="popup_content"></slot>
    </div>
  </div>
</template>

<style scoped>
  .x-popup {
    position: fixed;
    width: 750px; 
  }
  .top {
    left: 0;
    right: 0;
    
  }
  .bottom {
    left: 0;
    right: 0;
  }
  .left {
    bottom: 0;
    top: 0;
  }
  .right {
    bottom: 0;
    top:130px
  }
</style>

<script>
  const animation = weex.requireModule('animation');
   import asCore from '../js/core'
  const { platform } = weex.config.env;
  const isWeb = typeof (window) === 'object' && platform.toLowerCase() === 'web';
  export default {
    components: { 
      "x-overlay": require("./overlay.vue")
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      pos: {
        type: String,
        default: 'bottom'
      },
      popupColor: {
        type: String,
        default: '#FFFFFF'
      },
      overlayCfg: {
        type: Object,
        default: () => ({
          hasAnimation: true,
          timingFunction: ['ease-in', 'ease-out'],
          duration: 200,
          opacity: 0.6
        })
      },
      height: {
        type: [Number, String],
        default: 840
      },
      standOut: {
        type: [Number, String],
        default: 0
      },
      width: {
        type: [Number, String],
        default: 750
      },
      animation: {
        type: Object,
        default: () => ({
          timingFunction: 'ease-in'
        })
      }
    },
    data: () => ({
      haveOverlay: true,
      isOverShow: true
    }),
    computed: {
      isNeedShow () {
        if(this.pos=="top"){
          //return this.show
        }
        setTimeout(() => {
          this.appearPopup(this.show);
        }, 50);
        return this.show;
      },
      _height () {
        this.appearPopup(this.show, 150);
        return this.height;
      },
      padStyle () {
        const { pos, width, height, popupColor } = this;
        let style = {
          width: `${width}px`,
          backgroundColor: popupColor
        };
        pos === 'top' && (style = {
          ...style,
          top: `130px`,
          height: `${height}px`
        });
        pos === 'bottom' && (style = {
          ...style,
          bottom: `${-height}px`,
          height: `${height}px`
        });
        pos === 'left' && (style = {
          ...style,
          left: `${-width}px`
        });
        pos === 'right' && (style = {
          ...style,
          right: `${-width}px`
        });
        return style;
      }
    },
    methods: {
      handleTouchEnd (e) {
        // 在支付宝上面有点击穿透问题
        //const { platform } = weex.config.env;
        //platform === 'Web' && e.preventDefault && e.preventDefault();
      },
      hide () {
        this.appearPopup(false);
        this.$refs.overlay.appearOverlay(false);
      },
      bodyClicking () {
        this.isShow && this.appearPopup(false);
      },
      appearPopup (bool, duration = 200) {
        this.isShow = bool;
        const popupEl = this.$refs['x-popup'];
        if (!popupEl) {
          return;
        }
        animation.transition(popupEl, {
          styles: {
            transform: this.getTransform(this.pos, this.width, this.height, !bool)
          },
          duration,
          delay: 0,
          ...this.animation
        }, () => {
          if (!bool) {
            this.$emit('popupClicked', { pos: this.pos });
          }
        });
      },
      getTransform (pos, width, height, bool) {
        let _size = pos === 'top' || pos === 'bottom' ? height : width;
        let _transform;
        // if (isWeb) {
        //   _size -= this.standOut;
        // }
        bool && (_size = 0);
        switch (pos) {
          case 'top':
            _transform = `height(${_size}px)`;
            break;
          case 'bottom':
            _transform = `translateY(-${_size}px)`;
            break;
          case 'left':
            _transform = `translateX(${_size}px)`;
            break;
          case 'right':
            _transform = `translateX(-${_size}px)`;
            break;
        }
        return _transform;
      }
    }
  }
</script>